<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        流程信息
      </div>
      
      <div style="padding-top:20px;">
        <VolForm
          v-if="type === 'node'"
          style="padding-right:20px;"
          ref="myform"
          :label-width="100"
          :loadKey="false"
          :formFields="node"
          :formRules="formRules"
        >
        
          <div style="text-align:center;padding-left:25px;display:flex;">
            <el-button
              size="small"
              icon="el-icon-delete"
              type="danger"
              @click="delNode"
              >删除</el-button
            >
            <el-button
              size="small"
              icon="el-icon-check"
              type="primary"
              @click="save"
              >保存</el-button
            >
          </div>
        </VolForm>
        <div
            v-if="type === 'judgment'"
            style="text-align:center;padding-left:25px;"
          >
          <el-form-item label="结点名称">
            <el-input v-model="node.name"></el-input>
          </el-form-item>
          <el-divider></el-divider>
          <div v-for="item in node.judgment==null?0:node.judgment.length" :key="item">
            <el-form
            v-model="node.judgment[item-1]"
          >
          <el-form-item label="描述">
            <el-input v-model="node.judgment[item-1].describe"></el-input>
          </el-form-item>
          <el-form-item label="条件字段">
            <el-select v-model="node.judgment[item-1].conditionInfo" filterable placeholder="请选择">
                <el-option
                  v-for="item in JudgmentOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.field">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="运算符">
            <el-select v-model="node.judgment[item-1].operators">
              <el-option label="等于" value="="></el-option>
              <el-option label="不等于" value="!="></el-option>
              <el-option label="大于" value=">"></el-option>
              <el-option label="大于等于" value=">="></el-option>
              <el-option label="小于" value="<"></el-option>
              <el-option label="小于等于" value="<="></el-option>
              <el-option label="包含" value="like"></el-option>
              <el-option label="不包含" value="not like"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="值">
            <el-input v-model="node.judgment[item-1].conditionValue"></el-input>
          </el-form-item>
          <el-form-item label="条件关系">
            <el-radio-group v-model="node.judgment[item-1].between">
              <el-radio label="and">且</el-radio>
              <el-radio label="or">或</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="danger"  @click="delCondition(item)">移除</el-button>
          </el-form-item>
          </el-form>
          <el-divider></el-divider>
          
          </div>
          <el-button type="primary" round @click="addCondition">+增加条件</el-button>
          <el-divider></el-divider>
            <el-button
              size="small"
              icon="el-icon-delete"
              type="danger"
              @click="delNode"
              >删除</el-button
            >
            <el-button
              size="small"
              icon="el-icon-check"
              type="primary"
              @click="save"
              >保存</el-button
            >
          </div>
        <div class="ef-node-form-body">
          <el-form
            :model="node"
            ref="dataForm"
            label-width="80px"
            v-show="type === 'node'"
          >
          
          </el-form>

          <div
            v-show="type === 'line'"
            style="text-align:center;padding-left:25px;"
          >
          <el-form
            v-model="line"
            ref="dataForm"
            label-width="80px"
            v-show="stepType === 'node2'"
          >
            <el-radio v-model="line.label" label='1'>是</el-radio>
            <el-radio v-model="line.label" label='2'>否</el-radio>
          </el-form>
            
          <el-button
              size="small"
              icon="el-icon-check"
              type="primary"
              @click="saveLine"
              v-if="stepType === 'node2'"
              >修改连线</el-button
            >
            <el-button
              size="small"
              style=" width: 100%;"
              icon="el-icon-delete"
              type="danger"
              @click="deleteElement"
              >删除连接线</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash';
import VolForm from '@/components/basic/VolForm.vue';

export default {
  components: {
    VolForm
  },
  created() {
    this.http.get('api/Sys_WorkFlow/getNodeDic').then((result) => {
      this.formRules.forEach((options) => {
        options.forEach((option) => {
          if (option.field == 'userId') {
            option.data = result.users || [];
          } else if (option.field == 'roleId') {
            option.data = result.roles || [];
          } else if (option.field == 'deptId') {
            //部门(暂时没有部门表)
            option.data = result.dept || [];
          }
        });
      });
    });
    
  },
  data() {
    return {
      node: {
        name: '',
        nodeType: 1,
        userId: null,
        roleId: null,
        deptId: null,
        stepValue: null,
        judgment:null
      },
      
      formRules: [
        [
          {
            title: '节点名称',
            field: 'name',
            required: true
          }
        ],
        [
          {
            dataKey: '1111',
            title: '审批类型',
            required: true,
            field: 'nodeType',
            data: [
              { key: 1, value: '按用户审批' },
              { key: 2, value: '按角色审批' },
              { key: 3, value: '按部门审批' },
              //{ key: 4, value: '判断条件' }
            ],
            type: 'select',
            onChange: this.nodeTypeChange
          }
        ],
        [
          {
            dataKey: '',
            hidden: false,
            title: '审批用户',
            required: true,
            field: 'userId',
            data: [],
            type: 'select'
          }
        ],
        [
          {
            dataKey: '',
            hidden: true,
            title: '角色信息',
            required: true,
            field: 'roleId',
            data: [],
            type: 'select'
          }
        ],
        [
          {
            dataKey: '',
            hidden: true,
            title: '部门信息',
            required: true,
            field: 'deptId',
            data: [],
            type: 'select'
          }
        ]
      ],

      visible: true,
      // node 或 line
      type: 'node',
      stepType:'',
      lineList:[],
      line: {},
      data: {},
      JudgmentOption:[],
      stateList: [
        {
          state: 'success',
          label: '成功'
        },
        {
          state: 'warning',
          label: '警告'
        },
        {
          state: 'error',
          label: '错误'
        },
        {
          state: 'running',
          label: '运行中'
        }
      ]
    };
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    //点击节点将节点数据传过来并赋值
    nodeInit(data, id) {
      this.type = 'node';
      this.data = data;
      data.nodeList.filter((node) => {
        if (node.id === id) {
          if(node.stepType==false)
          {
            this.type = 'judgment';
          }
          else
          {
            this.type = 'node';
          }
          let _node = cloneDeep(node);
          console.log(_node.judgment,'_node.judgment');
          _node.roleId = _node.roleId || null;
          _node.userId = _node.userId || null;
          _node.nodeType = (_node.nodeType || 1) * 1;
          _node.judgment =_node.judgment || null;
          this.nodeTypeChange(_node.nodeType);
          Object.assign(this.node, _node);
        }
      });
    },
    nodeTypeChange(value) {
      // { key: 1, value: '按用户审批' },
      //   { key: 2, value: '按角色审批' },
      //   { key: 3, value: '按部门审批' }
      this.formRules.forEach((options) => {
        options.forEach((option) => {
          if (option.field == 'userId') {
            option.hidden = value != 1;
          } else if (option.field == 'roleId') {
            option.hidden = value != 2;
          } else if (option.field == 'deptId') {
            option.hidden = value != 3;
          }
        });
      });
    },
    lineInit(line) {
      console.log(line,'line');
      line.nodeList.find((x)=>{
        return x.id == line.from
      }).stepType == true?this.stepType='node1':this.stepType='node2'
      this.type = 'line';
      this.line = line;
      this.lineList = line.lineList
      this.line.label = line.label=='是'?'1':'2'
    },
    // 修改连线
    saveLine() {
      let to = this.lineList.find((x)=>{
        return x.from == this.line.from && x.to != this.line.to
      })
      console.log(to,'to');
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label);
      this.$emit('setLineLabel', this.line.from, to.to, this.line.label=='1'?'2':'1');
      this.$message.success('保存成功');
      
    },
    save() {
      this.data.nodeList.filter((node) => {
        if (node.id === this.node.id) {
          node.name = this.node.name;
          node.left = this.node.left;
          node.top = this.node.top;
          node.ico = this.node.ico;
          node.state = this.node.state;
          node.stepValue = this.node.stepValue;
          node.stepType =this.node.stepType;
          node.judgment =JSON.stringify(this.node.judgment)
          console.log(node.judgment,'node.judgment');
          this.$emit('repaintEverything', this.node);
        }
      });
      this.$message.success('保存成功');
    },
    deleteElement() {
      this.$emit('deleteElement');
    },
    delNode() {
      this.$emit('delNode', this.node.id);
    },
    addCondition()
    {
      //空数组不能push
      let jud = this.node.judgment==null?[]:this.node.judgment
      this.node.judgment = jud
      let con ={
        describe:null,
        conditionInfo:null,
        operators:'=',
        conditionValue:null,
        between:'and'
      }
      this.node.judgment.push(con)
      console.log(this.node.judgment,'list');
    },
    delCondition(index)
    {
      console.log(index);
      this.node.judgment.splice(index-1,1)
    },
    GetJudgment(val)
    {
      console.log(val.WorkTable,'val');
      this.http.get('api/tb_project_workflowstep/JudgmentConditions?tableName='+val.WorkTable).then(
            res=>{
              this.JudgmentOption = res.data
            }
        )
    }

  }
};
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
.table_style {
  border: 1px solid #ccc;
  height: 50px;
  text-align: center;
}

.table_style1 {
  border: 1px solid #ccc;
  height: 50px;
  width: 50px;
  text-align: center;
}
</style>
